<template>
  <div>
    <md-scroll-view
      ref="scrollView"
      :scrolling-x="false"
      :auto-reflow="true"
      @endReached="onEndReached"
      @refreshing="onRefresh"
    >
      <md-scroll-view-refresh
        slot="refresh"
        slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
        :scroll-top="scrollTop"
        :is-refreshing="isRefreshing"
        :is-refresh-active="isRefreshActive"
      ></md-scroll-view-refresh>
      <div v-for="(item, key) in data" :key="key">
        <div class="line">
          <div>
            <p>
              好友 <span style="color: #327EB8;">{{}}</span> 成功购买<span
                >{{}}</span
              >
            </p>
            <p>获得奖励：￥{{}}</p>
          </div>
        </div>
      </div>
      <md-scroll-view-more
        slot="more"
        :is-finished="isFinished"
        finished-text="已经到底啦~"
      >
      </md-scroll-view-more>
    </md-scroll-view>
  </div>
</template>

<script>
import {
  Icon,
  Popup,
  PopupTitleBar,
  ScrollView,
  ScrollViewMore,
  ScrollViewRefresh
} from "mand-mobile";
export default {
  name: "login",
  components: {
    [ScrollView.name]: ScrollView,
    [ScrollViewMore.name]: ScrollViewMore,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar
  },
  data() {
    return {
      data: "",
      curpage: 0,
      sort_type: null,
      search_key: null,
      isFinished: false
    };
  },
  methods: {
    onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.curpage++;
      this.getInfo();
    },
    onRefresh() {
      this.$nextTick(() => {
        this.curpage = 1;
        this.isFinished = false;
        this.getInfo(true);
      });
    },
    getInfo(refresh) {
      this.$ajax
        .post(this.$api.moneyList, {
          pageNumber: this.curpage,
          pageSize: 15,
          type: "1"
        })
        .then(res => {
          if (refresh) {
            this.data = res.data.data;
            this.$refs.scrollView.finishRefresh();
          } else {
            this.data.push.apply(this.data, res.data.list);
          }
          if (this.curpage === res.data.total_page) {
            this.isFinished = true;
          }
          this.$refs.scrollView.finishLoadMore();
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    }
  },
  created() {
    this.getInfo(true);
  }
};
</script>

<style scoped lang="stylus">
.line{
  border-bottom 1px solid #E6E6E6;
  background-color #ffffff;
}
.line>div{
  display flex;
  padding 28px 24px 27px;
  font-size 26px;
  color #333333;
  justify-content space-between;
}
.line>div>p:first-child{
  width 60%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.line>div>p:last-child{
  font-size 24px;
  color #666666;
}
</style>
